<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabs选项卡</title>
</head>
<style>
#tabs_view {
width: 600px;
overflow: hidden;
}
.tabs_bar_ul{
list-style: none;
display:-webkit-flex;
-webkit-flex-flow: row;
-webkit-flex-wrap: nowrap; 
}
.tabs_bar_ul li {
flex:1;
text-align: center;
}
.tab-line-animated,.tab-content-animated {
transition:transform 0.3s cubic-bezier(0.86, 0, 0.07, 1); 
}
#tabs_bar_line {
	bottom: 0;
	height: 4px;
	width:50%;
	display:block;
	background:red;
	width: 50%;
}
.tabs_content {
display:-webkit-flex;
-webkit-flex-flow: row;
-webkit-flex-wrap: nowrap; 
}
.tabs_content_item {
flex-shrink: 0;
height:auto;
background:white;
width:100%;
}
</style>
<body>
	<div id="tabs_view">
		<div class="tabs_bar">
			<ul class="tabs_bar_ul">
				<li class="tabs_li" data-index='0' onclick="functionIndex()">tab_1</li>
				<li class="tabs_li" data-index='1' onclick="functionIndex()">tab_2</li>
			</ul>
		</div>
		<div id="tabs_bar_line" class="tab-line-animated"></div>
		<div class="tabs_content tab-content-animated">
			<div class="tabs_content_item">
				tab1
			</div>
			<div class="tabs_content_item">
				tab2
			</div>
		</div>
	</div>
</body>
<script>
var lis = document.getElementsByClassName("tabs_li");
var line = document.getElementById("tabs_bar_line");
var content = document.getElementsByClassName("tabs_content")[0];
var container = document.getElementById("tabs_view");
	lis[0].style.color = "red";
	function functionIndex(){
		for (var i = 0; i < lis.length; i++) {
			lis[i].style.color = "black";
		}
		$this = event.target;
		var index = Number($this.getAttribute("data-index"))
		$this.style.color = "red";
	
		var lineWidth  = Number(window.getComputedStyle(line,null).width.split("px")[0])
		line.style.transform = "translateX("+lineWidth*1*index+"px)";
	
		var containerWidth = Number(window.getComputedStyle(container,null).width.split("px")[0])
		content.style.transform = "translateX("+-containerWidth*1*index+"px)";
	}
</script>
</html>